<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>14天天气预报分析 - {{ city }}</title>
    <!-- 引入 ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <link rel="stylesheet" href="/static/css/styles.css">
    <link rel="stylesheet" href="/static/css/layout.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        /* 页面特定样式 */
        .page-title {
            margin-bottom: 1.5rem;
            color: var(--primary-color);
            font-weight: 500;
        }
        
        #debug-info {
            background-color: #f8f8f8;
            border: 1px solid #ddd;
            padding: 10px;
            margin: 20px 0;
            white-space: pre-wrap;
            display: none;
        }
        
        .error-message {
            color: #ff4d4f;
            padding: 10px;
            margin: 10px 0;
            background-color: #fff2f0;
            border: 1px solid #ffccc7;
            border-radius: 4px;
        }
        
        /* 确保图表容器有足够的高度 */
        .chart {
            width: 100%;
            height: 400px;
            min-height: 400px;
        }
    </style>
</head>
<body>
    <!-- 应用容器 -->
    <div class="app-container">
        <!-- 左侧导航栏 -->
        <aside class="sidebar">
            <div class="sidebar-header">
                <div class="sidebar-logo"><i class="fas fa-cloud-sun"></i> <span>天气预报系统</span></div>
                <h2>数据分析平台</h2>
            </div>
            <ul class="nav-links">
                <li>
                    <a href="/weather1" id="weather1Link" class="nav-link">
                        <i class="fas fa-clock"></i>
                        <span>24小时天气分析</span>
                    </a>
                </li>
                <li>
                    <a href="/weather14" class="nav-link active">
                        <i class="fas fa-calendar-alt"></i>
                        <span>14天天气预报分析</span>
                    </a>
                </li>
            </ul>
        </aside>
        
        <!-- 主内容区域 -->
        <main class="main-content">
            <!-- 顶部栏 -->
            <div class="top-bar">
                <div class="city-selector-bar">
                    <span>当前城市：</span>
                    <select id="citySelect">
                        {% for city_name, code in cities.items() %}
                        <option value="{{ city_name }}" {% if city_name == city %}selected{% endif %}>{{ city_name }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            
            <!-- 内容区域 -->
            <div class="content">
                <h1 class="page-title">14天天气预报分析 - {{ city }}</h1>
                
                <div class="analysis-container">
                    <div id="debug-info"></div>
                    
                    <div class="chart-container">
                        <h2><i class="fas fa-temperature-high"></i> 高低温变化曲线</h2>
                        <div id="temperature-chart" class="chart"></div>
                    </div>
                    
                    <div class="chart-container">
                        <h2><i class="fas fa-cloud-sun-rain"></i> 天气类型分布</h2>
                        <div id="weather-pie-chart" class="chart"></div>
                    </div>
                    
                    <div class="chart-container">
                        <h2><i class="fas fa-wind"></i> 风向雷达图</h2>
                        <div id="wind-chart" class="chart"></div>
                    </div>
                    
                    <div class="chart-container">
                        <h2><i class="fas fa-temperature-low"></i> 温差变化曲线</h2>
                        <div id="temperature-diff-chart" class="chart"></div>
                    </div>
                    
                    <div class="chart-container">
                        <h2><i class="fas fa-wind"></i> 风级变化曲线</h2>
                        <div id="wind-bar-chart" class="chart"></div>
                    </div>
                </div>
                
                <footer>
                    <p>© 2024 天气预报数据分析系统</p>
                </footer>
            </div>
        </main>
    </div>

    <script>
        // 城市选择功能
        document.addEventListener('DOMContentLoaded', function() {
            const citySelect = document.getElementById('citySelect');
            const weather1Link = document.getElementById('weather1Link');
            
            // 当选择变化时加载相应城市的数据
            citySelect.addEventListener('change', function() {
                const city = this.value;
                window.location.href = `/weather14?city=${encodeURIComponent(city)}`;
            });
            
            // 更新其他导航链接
            const city = citySelect.value;
            weather1Link.href = `/weather1?city=${encodeURIComponent(city)}`;
        });
    
        // 调试信息 - 输出接收到的数据
        let chartData;
        try {
            chartData = JSON.parse('{{ chart_data|tojson|safe }}');
            document.getElementById('debug-info').textContent = JSON.stringify(chartData, null, 2);
            // 开发环境下可以显示调试信息，生产环境请注释下面这行
            // document.getElementById('debug-info').style.display = 'block';
            console.log('Chart data received:', chartData);
        } catch (error) {
            console.error('Error parsing chart data:', error);
            document.getElementById('debug-info').textContent = 'Error parsing chart data: ' + error.message;
            document.getElementById('debug-info').style.display = 'block';
            // 设置默认图表数据，确保页面不会崩溃
            chartData = {
                tem: {
                    xAxis: ["Day 1", "Day 2", "Day 3", "Day 4", "Day 5", "Day 6", "Day 7"],
                    series: [
                        {name: '最高温度', type: 'line', data: [20, 22, 21, 23, 20, 19, 18]},
                        {name: '最低温度', type: 'line', data: [10, 12, 11, 13, 10, 9, 8]}
                    ],
                    min: 5,
                    max: 25
                },
                wind: {
                    indicator: [
                        {name: "东北风", max: 3}, {name: "东风", max: 3}, {name: "东南风", max: 3}, {name: "南风", max: 3},
                        {name: "西南风", max: 3}, {name: "西风", max: 3}, {name: "西北风", max: 3}, {name: "北风", max: 3}
                    ],
                    data: [1, 2, 1, 0, 1, 2, 1, 0]
                },
                pie: {
                    data: [
                        {value: 3, name: '晴天'},
                        {value: 2, name: '多云'},
                        {value: 1, name: '小雨'},
                        {value: 1, name: '阴天'}
                    ]
                },
                tem_change: {
                    xAxis: ["Day 1", "Day 2", "Day 3", "Day 4", "Day 5", "Day 6", "Day 7"],
                    series: [{
                        name: '温差',
                        type: 'bar',
                        data: [10, 10, 10, 10, 10, 10, 10],
                        markPoint: {data: []},
                        markLine: {data: [{type: 'average', name: '平均温差'}]}
                    }],
                    colors: Array(7).fill('#1976D2')
                },
                wind_bar: {
                    xAxis: ["Day 1", "Day 2", "Day 3", "Day 4", "Day 5", "Day 6", "Day 7"],
                    series: [{
                        name: '风级',
                        type: 'bar',
                        data: [3, 2, 4, 3, 2, 3, 2],
                        markPoint: {data: []},
                        markLine: {data: [{type: 'average', name: '平均风级'}]}
                    }],
                    colors: Array(7).fill('#1976D2')
                }
            };
        }
        
        // 初始化ECharts图表
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化高低温图表
            const temperatureChart = echarts.init(document.getElementById('temperature-chart'));
            const temperatureOption = {
                title: {
                    text: '14天高低温变化曲线图',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: function(params) {
                        let result = params[0].axisValue + '<br/>';
                        params.forEach(param => {
                            result += param.seriesName + ': ' + param.value + '°C<br/>';
                        });
                        return result;
                    }
                },
                legend: {
                    data: ['最高温度', '最低温度'],
                    top: 30
                },
                toolbox: {
                    show: true,
                    feature: {
                        saveAsImage: {title: '保存为图片'}
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: chartData.tem.xAxis,
                    axisLabel: {
                        rotate: 30,
                        interval: 0
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '温度 (°C)',
                    min: chartData.tem.min,
                    max: chartData.tem.max
                },
                series: chartData.tem.series
            };
            temperatureChart.setOption(temperatureOption);
            
            // 初始化天气类型饼图
            const weatherPieChart = echarts.init(document.getElementById('weather-pie-chart'));
            const weatherPieOption = {
                title: {
                    text: '14天天气类型分布',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    type: 'scroll',
                    orient: 'vertical',
                    right: 10,
                    top: 20,
                    bottom: 20
                },
                series: [
                    {
                        name: '天气类型',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '18',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: chartData.pie.data
                    }
                ]
            };
            weatherPieChart.setOption(weatherPieOption);
            
            // 初始化风向雷达图
            const windChart = echarts.init(document.getElementById('wind-chart'));
            const windOption = {
                title: {
                    text: '风向雷达图',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    data: ['风级'],
                    top: 30
                },
                toolbox: {
                    show: true,
                    feature: {
                        saveAsImage: {title: '保存为图片'}
                    }
                },
                radar: {
                    indicator: chartData.wind.indicator,
                    shape: 'circle',
                    splitNumber: 4,
                    axisName: {
                        color: '#333'
                    },
                    splitLine: {
                        lineStyle: {
                            color: ['#ccc']
                        }
                    },
                    splitArea: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#ddd'
                        }
                    }
                },
                series: chartData.wind.series || [{
                    name: '风频率',
                    type: 'radar',
                    data: [{
                        value: chartData.wind.data || [1, 1, 1, 1, 1, 1, 1, 1],
                        name: '风级',
                        symbolSize: 6,
                        areaStyle: {
                            color: 'rgba(25, 118, 210, 0.4)'
                        },
                        lineStyle: {
                            color: '#1976D2',
                            width: 2
                        },
                        itemStyle: {
                            color: '#1976D2'
                        }
                    }]
                }]
            };
            windChart.setOption(windOption);
            
            // 初始化温差柱状图
            const temperatureDiffChart = echarts.init(document.getElementById('temperature-diff-chart'));
            const temperatureDiffOption = {
                title: {
                    text: '14天温差变化曲线图',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: '{b} <br/>温差: {c}°C'
                },
                toolbox: {
                    show: true,
                    feature: {
                        saveAsImage: {title: '保存为图片'}
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: chartData.tem_change.xAxis,
                    axisLabel: {
                        rotate: 30,
                        interval: 0
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '温差 (°C)'
                },
                series: [
                    {
                        name: '温差',
                        type: 'bar',
                        data: chartData.tem_change.series[0].data,
                        itemStyle: {
                            color: function(params) {
                                return chartData.tem_change.colors[params.dataIndex];
                            }
                        },
                        markPoint: chartData.tem_change.series[0].markPoint,
                        markLine: chartData.tem_change.series[0].markLine
                    }
                ]
            };
            temperatureDiffChart.setOption(temperatureDiffOption);
            
            // 初始化风级柱状图
            const windBarChart = echarts.init(document.getElementById('wind-bar-chart'));
            const windBarOption = {
                title: {
                    text: '14天风级变化曲线图',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: '{b} <br/>风级: {c}'
                },
                toolbox: {
                    show: true,
                    feature: {
                        saveAsImage: {title: '保存为图片'}
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: chartData.wind_bar.xAxis,
                    axisLabel: {
                        rotate: 30,
                        interval: 0
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '风级',
                    minInterval: 1
                },
                series: [
                    {
                        name: '风级',
                        type: 'bar',
                        data: chartData.wind_bar.series[0].data,
                        itemStyle: {
                            color: function(params) {
                                return chartData.wind_bar.colors[params.dataIndex];
                            }
                        },
                        markPoint: chartData.wind_bar.series[0].markPoint,
                        markLine: chartData.wind_bar.series[0].markLine
                    }
                ]
            };
            windBarChart.setOption(windBarOption);
            
            // 响应窗口大小变化，重新调整图表大小
            window.addEventListener('resize', function() {
                temperatureChart.resize();
                weatherPieChart.resize();
                windChart.resize();
                temperatureDiffChart.resize();
                windBarChart.resize();
            });
        });
    </script>
</body>
</html> 